<template>
  <div>
    <el-card class="box-card" shadow="hover">
      <!-- 经销商搜索表单-->
      <el-form v-show="tabName === '经销商列表'"  :model="queryParams" ref="queryForm" :inline="true">
          <el-form-item label="姓名" >
              <el-input
              v-model="queryParams.name"
              placeholder="请输入姓名"
              clearable
              size="small"
              style="width: 240px"
              @keyup.enter.native="handleQuery"
              />
          </el-form-item>
          <el-form-item label="所属省市区" >
            <el-cascader
            v-model="queryParams.position"
            :options="options"
            size="small"
            @keyup.enter.native="handleQuery"
            style="width: 100%"/>
              
          </el-form-item>
          <el-form-item label="状态">
              <el-select
              v-model="queryParams.status"
              placeholder="状态"
              clearable
              size="small"
              style="width: 240px"
              >
              <el-option
                  v-for="statu in statusOptions"
                  :key="statu.value"
                  :label="statu.label"
                  :value="statu.value"/>
              </el-select>
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input
              v-model="queryParams.phone"
              placeholder="请输入联系方式"
              clearable
              size="small"
              style="width: 240px"
              @keyup.enter.native="handleQuery"
              />
          </el-form-item>
          <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
              <el-button 
              icon="el-icon-plus" 
              size="mini" 
              @click="dialogVisible = true,dialogTitle = '添加下级经销商',form =  {}"
              type="primary">
              添加下级经销商
              </el-button>
          </el-form-item>
      </el-form>

      <!-- 经销商管理表-->
      <el-table
      v-if="tabName === '经销商列表'"
      :data="tableData"
      stripe
      style="width: 100%">
        <el-table-column
        prop="id"
        label="id"
        align="center">
        </el-table-column>
        <el-table-column
        prop="name"
        label="姓名"
        align="center">
        </el-table-column>
        <el-table-column
        prop="phone"
        label="联系方式"
        align="center">
        </el-table-column>
        <el-table-column
        prop="address"
        label="联系地址"
        align="center">
        </el-table-column>
        <el-table-column
        prop="levelValue"
        label="级别"
        align="center">
        </el-table-column>
        <el-table-column
        prop="commissionRate"
        label="佣金比例"
        align="center">
          <template slot-scope="scope">
            <span>{{scope.row.commissionRate}}%</span>
          </template>
        </el-table-column>
        <el-table-column
        prop="brokerage"
        label="今日佣金"
        align="center">
        </el-table-column>
        <el-table-column
        prop="position"
        label="所属省市区"
        align="center">
        </el-table-column>
        <el-table-column
        prop="statusValue"
        label="状态"
        align="center">
        </el-table-column>
        <el-table-column
        width="100"
        fixed="right"
        label="操作"
        align="center">
          <template slot-scope="scope">
              <i class="el-icon-edit" style="font-size: 12px;color: #409EFF;cursor:pointer;" @click="update(scope.row.id)">编辑</i>
              <i class="el-icon-delete" style="font-size: 12px;color: #F56C6C;cursor:pointer;" @click="remove(scope.row.id)">删除</i>
          </template>
        </el-table-column>
      </el-table>
      <!-- 提现记录表-->
      <el-table
      v-if="tabName === '提现记录'"
      :data="tableData"
      stripe
      style="width: 100%">
        <el-table-column
        prop="id"
        label="id"
        align="center">
        </el-table-column>
        <el-table-column
        prop="userName"
        label="用户"
        align="center">
        </el-table-column>
        <el-table-column
        prop="money"
        label="金额"
        align="center">
        </el-table-column>
        <el-table-column
        prop="createDate"
        label="提现时间"
        sortable
        width="100"
        align="center">
        </el-table-column>
        <el-table-column
        prop="statusValue"
        label="处理状态"
        align="center">
        </el-table-column>
        <el-table-column
        prop="qrCode"
        label="图片"
        align="center">
            <template slot-scope="scope">
                <img v-if="scope.row.qrCode" :src="scope.row.qrCode" class="url">
            </template>
        </el-table-column>
        <el-table-column
        prop="note"
        label="备注"
        align="center">
        </el-table-column>              
        <el-table-column
        width="100"
        fixed="right"
        label="操作"
        align="center">
          <template slot-scope="scope">
              <i class="el-icon-edit" style="font-size: 12px;color: #409EFF;cursor:pointer;" @click="updateOneExtract(scope.row.id)">编辑</i>
              <i class="el-icon-delete" style="font-size: 12px;color: #F56C6C;cursor:pointer;" @click="remove(scope.row.id)">删除</i>
          </template>
        </el-table-column>
      </el-table>
      <!--分页栏-->
      <el-pagination
        background
        align="center"
        @size-change="handleSizeChange($event,111)"
        @current-change="data()"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
    <!--经销商添加框-->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form v-if="dialogTitle === '添加下级经销商' 
      || dialogTitle === '编辑经销商' " 
      ref="form" 
      :model="form" 
      label-width="100px" 
      :rules="rules">
        <el-form-item label="用户id">
          <el-input v-model="form.userId"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="phone">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="联系地址">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item label="账号状态">
          <el-select
              v-model="form.status"
              placeholder="状态"
              clearable
              style="width: 100%"
              >
              <el-option
                  v-for="statu in statusOptions"
                  :key="statu.value"
                  :label="statu.label"
                  :value="statu.value"/>
              </el-select>
        </el-form-item>
        <el-form-item label="佣金比例">
          <el-input 
          type="number"
          v-model="form.commissionRate">
          </el-input>
        </el-form-item>
        <el-form-item label="所属省市区">
          <el-cascader
            v-model="form.position"
            :options="options"
            style="width: 100%"/>
          </el-form-item>
        <el-form-item label="权限">
          <i>价格参数修改</i>
          <el-switch v-model="form.jurisPrice"></el-switch>
          <i>机器广告图修改</i>
          <el-switch v-model="form.jurisAdvertising"></el-switch>
          <i>微信提现</i>
          <el-switch v-model="form.jurisWithdraw"></el-switch>
        </el-form-item>
      </el-form>
      <el-form v-else ref="form" :model="form" label-width="80px">
        <el-form-item label="处理状态">
          <el-select
              v-model="form.agree"
              placeholder="状态"
              clearable
              :disabled="form.status!=0"
              style="width: 240px"
              >
              <el-option
                  v-for="statu in statusOptions"
                  :key="statu.value"
                  :label="statu.label"
                  :value="statu.value"/>
              </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.note"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submmit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { list,add,del,update,dealer,inquire,extractList,updateExtract,extract } from '@/api/app_pages/dealer'
import { regionDataPlus,CodeToText } from 'element-china-area-data'
import { getUserProfile } from '@/api/system/user'
import { getDicts } from '@/api/system/dict/data'
  export default {
    components:{
        
    },
    data(){
      return {
        options: regionDataPlus,
        queryParams:{},
        tableData: [],
        form:{},
        size: 20,
        currentPage: 1,
        total: 0,
        dialogVisible: false,
        tabName: '',
        dialogTitle:'',
        statusOptions:[],
        // 表单校验
        rules: {
            phone: [
            { required: true, message: "手机号码不能为空", trigger: "blur" },
            {
                pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                message: "请输入正确的手机号码",
                trigger: "blur"
            }
            ]
        },
      }
    },
    created(){
      this.tabName = this.$route.path.split("/")[2]
      this.queryParams.status = ''
      if(this.tabName == '经销商列表'){
        getDicts('sys_account_status').then(res => {
            let data = []
            res.data.forEach(item => {
                data.push({label:item.dictLabel,value:item.dictValue})
            });
            this.statusOptions = data
        })
      }else{
        getDicts('sys_extract_status').then(res => {
            let data = []
            res.data.forEach(item => {
                data.push({label:item.dictLabel,value:item.dictValue})
            });
            this.statusOptions = [{label: '同意',value: true,},{label: '拒绝',value: false,}]
        })
      }
      
      this.data()  
      getUserProfile().then(res => {
        this.form.userId = res.data.userId
      })
    },
    methods:{
      data(){
        if(this.tabName == '经销商列表'){
          list(this.size,this.currentPage).then(res => {
            this.tableData = res.rows
            for(let i=0 ;i<res.rows.length;i++){
                let position = CodeToText[res.rows[i].positionProvince]
                if(res.rows[i].positionCity){
                  position = position +'/'+ CodeToText[res.rows[i].positionCity]
                }else{
                  position = position +'/'+ CodeToText['']
                }
                if(res.rows[i].positionArea){
                  position = position +'/'+ CodeToText[res.rows[i].positionArea]
                }else{
                  if(res.rows[i].positionCity){
                    position = position +'/'+ CodeToText['']
                  }
                }
                this.tableData[i].position = position
              }
            this.total = parseInt(res.total)
          })
        }else{
          extractList(this.size,this.currentPage).then(res => {
            this.tableData = res.rows
            this.total = parseInt(res.total)
          })
        }
      },
      handleSizeChange(val,e) {
        this.size = val
        this.data()
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      update(id){
        this.dialogTitle = '编辑经销商'
        this.dialogVisible = true
        this.form.id = parseInt(id);  
        dealer(this.form.id).then(res => {
            this.form = res.data 
            let p = []
            p.push(res.data.positionProvince)
            if(res.data.positionCity){
              p.push(res.data.positionCity)
            }else{
              p.push('')
            }
            if(res.data.positionArea){
              p.push(res.data.positionArea)
            }else{
              if(res.data.positionCity){
                p.push('')
              }
            }
            this.form.position = p 
          })
      },
      submmit(){
        
        if(this.dialogTitle == '编辑提现记录'){
          this.$delete(this.form,'userId')
          this.$delete(this.form,'userName')
          this.$delete(this.form,'money')
          this.$delete(this.form,'qrCode')
          this.$delete(this.form,'statusValue')
          this.$delete(this.form,'disposeDate')
          this.$delete(this.form,'createDate')
          new Promise((resolve,reject) =>{
              updateExtract(this.form).then(res => {
                this.dialogVisible = false
                resolve()
              })
            }).then(res => {
              this.data()
            })
        }else{
          this.$refs['form'].validate((valid) => {
          if (valid) {
            this.form.positionProvince = this.form.position[0]
            this.form.positionCity = this.form.position[1]
            this.form.positionArea = this.form.position[2]
            if(this.form.positionCity == ''){
              this.$delete(this.form,'positionCity')
            }
            if(this.form.positionArea){
              this.$delete(this.form,'positionArea')
            }
            this.$delete(this.form,'position')
            this.$delete(this.form,'positionProvinceValue')
            this.$delete(this.form,'positionCityValue')
            this.$delete(this.form,'positionAreaValue')
            this.$delete(this.form,'levelValue')
            this.$delete(this.form,'level')
            this.$delete(this.form,'statusValue')
            if(this.dialogTitle == '编辑经销商'){
                new Promise((resolve,reject) =>{
                  update(this.form).then(res => {
                    this.dialogVisible = false
                    resolve()
                  })
                }).then(res => {
                  this.data()
                })
              
              }else{
                new Promise((resolve,reject) =>{
                  add(this.form).then(res => {
                      this.dialogVisible = false
                      resolve()
                    })  
                  }).then(res => {
                    this.data()
                  })
              }
          } else {
            return false;
          }
        });
        }
        
      },
      remove(id){
        let ids = []
        ids.push(id)
        new Promise((resolve,reject) =>{
            del(ids).then(res => {
              resolve()
            })  
        }).then(res => {
          this.$message('删除成功')
          this.data()
        })   
      },
      updateOneExtract(id){
        this.dialogTitle = '编辑提现记录'
        this.dialogVisible = true
        this.form.id = parseInt(id);  
        extract(this.form.id).then(res => {
            this.form = res.data 
        })
      },
      handleQuery(){
        if(this.tabName == '经销商列表'){
          if(this.queryParams.position){
            this.queryParams.positionProvince = this.queryParams.position[0]
            this.queryParams.positionCity = this.queryParams.position[1]
            this.queryParams.positionArea = this.queryParams.position[2]
            if(this.queryParams.positionCity == ''){
              this.$delete(this.queryParams,'positionCity')
            }
            if(this.queryParams.positionArea){
              this.$delete(this.queryParams,'positionArea')
            }
            this.$delete(this.queryParams,'position')
          }
          
          inquire(this.queryParams).then(res =>{
              this.tableData = res.rows
              for(let i=0 ;i<res.rows.length;i++){
                let position = CodeToText[res.rows[i].positionProvince]
                if(res.rows[i].positionCity){
                  position = position +'/'+ CodeToText[res.rows[i].positionCity]
                }else{
                  position = position +'/'+ CodeToText['']
                }
                if(res.rows[i].positionArea){
                  position = position +'/'+ CodeToText[res.rows[i].positionArea]
                }else{
                  if(res.rows[i].positionCity){
                    position = position +'/'+ CodeToText['']
                  }
                }
                this.tableData[i].position = position
              }
              this.total = parseInt(res.total)
          })
        }
      },
      resetQuery(){
          this.queryParams = {}
          this.date = []
      },
  }
  }
</script>
<style>
  .text {
  font-size: 14px;
  }
  .item {
  margin-bottom: 18px;
  }
  .clearfix:before,
  .clearfix:after {
  display: table;
  content: "";
  }
  .clearfix:after {
  clear: both
  }
  .box-card {
  margin: 0 auto;
  }

  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .url {
      width: 50px;
      height: 50px;
      display: block;
      margin: 0 auto;
  }
</style>